<template>
    <div id="orderDetails" class="content">
        <div class="tilte-bar">订单详细信息</div>
        <div class="padding-1">
            <!-- 订单详细信息 WEUI -->
            <div class="weui-form-preview__hd weui-cell-background-color">
                <div class="weui-form-preview__item">
                    <label class="weui-form-preview__label">订单详情</label>
                    <!-- <em class="weui-form-preview__value">¥2400.00</em> -->
                </div>
            </div>
            <div class="weui-cell weui-cell-background-color" v-for="(value, key) in orderDetailsList">
                <div class="weui-cell__bd">
                    <p>{{key}}：</p>
                </div>
                <div class="weui-cell__ft">{{value}}</div>
            </div>
            <!-- 设备列表 -->
            <deviceList :deviceList="deviceDetailsList" :isClick=true></deviceList>
            <!-- 如未支付，则显示支付按钮 -->
            <!-- <div class="pay-wrap">
                <a href="javascript:;" class="weui-btn weui-btn_primary">支付</a>
            </div> -->
        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    import deviceList from '@/components/deviceList.vue'
    export default {
        mounted() {
            //  拿到订单号
            this.orderId = this.$route.params.orderId;
            //得到订单详情
            this.getOrderDetails();
        },
        data () {
            return {
                // 订单号
                orderId: '',
                // 订单详细信息
                orderDetailsList: {},
                //设备列表--简单信息
                deviceDetailsList: [],
                // 订单详细信息的字典
                KEY_DICT: {
                    "order_org": "委托单位",
                    "applicant_name": "经办人",
                    "applicant_phonenum": "经办人电话",
                    "check_phonenum": "传真",
                    "device_use_org": "使用单位",
                    // "use_contactor": "使用单位联系人",
                    // "use_phone_number": "使用单位联系人电话",
                    "device_install_org": "安装单位",
                    // "install_contactor": "安装单位联系人",
                    // "install_phone_number": "安装单位电话",
                    "payment_type": "付款方式",
                    "get_report_type": "报告领取方式",
                    "checker_loginnames": "期望检验员",
                    "checkDate_expect": "期望检验日期",
                    "project_name": "工程名称",
                    "project_address": "工程详细地址",
                    "contactPersonName": "检验方联系人",
                    "salesman_name": "业务员",
                },
            }
        },
        components: {
            deviceList: deviceList
        },
        methods: {
            // 获取订单详细信息
            async getOrderDetails() {
                let _self = this;
                let orderDetailsTmp = {};
                let deviceListTmp = [];
                let orderDetailsFinally = {};
                await _self.$http({
                    method: 'post',
                    url: 'orderDetail',
                    data: {
                        orderId: _self.orderId
                    }
                }).then( response => {
                    let data = response.data.data;
                    orderDetailsTmp = data.orderDetail;
                    deviceListTmp = data.deviceList;
                    console.log(deviceListTmp)
                })
                // 按顺序对订单详细信息排序
                for(let i=0; i < Object.keys(orderDetailsTmp).length; i++) {
                    for( let key in orderDetailsTmp ) {
                        if(orderDetailsTmp[key].index === i ) {
                            orderDetailsFinally[key] = orderDetailsTmp[key].value;
                        }
                    }
                }
                // _self.orderDetails = {...a};
                //将英文键名=>中文
                // let tmp = Object.assign({},_self.orderDetails.addOrder);
                _self.orderDetailsList = _self.GLOBAL.toChinese(orderDetailsFinally, _self.KEY_DICT);
                _self.deviceDetailsList = deviceListTmp;
            }
        }
    }
</script>

<style scoped>
    a {
        text-decoration: none;
    }
    .gap-1 {
        margin-bottom: .5rem;
        font-weight: bold;
    }
</style>